<template>
	<view class="container">
		<uni-card>
			<image class="img" :src="base + userInfo.avatar" mode="heightFix" />
			<view class="input-group">
				<text class="text">用户名:{{ userInfo.user_name }}</text>
				<button class="btn" type="default" size="mini">修改</button>
			</view>
			<view class="input-group">
				<text class="text">用户名:{{ userInfo.gender }}</text>
				<button class="btn" type="default" size="mini">修改</button>
			</view>
			<view class="input-group">
				<text class="text">邮箱:{{ userInfo.email }}</text>
				<button class="btn" type="default" size="mini">修改</button>
			</view>
			<view class="input-group">
				<text class="text">电话:{{ userInfo.phone }}</text>
				<button class="btn" type="default" size="mini">修改</button>
			</view>
			<!-- plain：普通的，此处理解为“是否使用镂空”按钮 -->
			<button class="Logout" type="primary" @click="doLogout" plain>退出登录</button>
		</uni-card>
	</view>
</template>

<script>
import { userGetBasic, userLogout, base } from '@/service';
export default {
	data() {
		return {
			userInfo: {}, //当前登录用户的信息
			base
		};
	},
	//生命周期方法 —— 组件（不是页面）挂载时
	async mounted() {
		//1.修改导航条中的标题
		uni.setNavigationBarTitle({
			title: '用户档案'
		});
		//2.获得当前登录用户的个人信息
		let data = await userGetBasic();
		//console.log('当前登录用户的信息：', data)
		this.userInfo = data;
	},
	methods: {
		//退出登录
		async doLogout() {
			//调用服务器端接口，清除当前用户的登录痕迹
			let { code, msg } = await userLogout();
			if (code === 200) {
				//退出成功
				//清除之前的登录痕迹
				uni.removeStorageSync('userToken');
				//“跳转”到“用户登录页” —— 给父组件发射自定义事件
				this.$emit('showChild', { childName: 'login' });
			} else {
				//退出失败
				//弹出一个模态对话框，提示失败原因
			}
		}
	}
};
</script>

<style lang="scss">
.container {
	//定位方式：绝对定位 —— 不占布局空间，这样一来一行中就可以同时出现“登录”和“注册”
	position: absolute;
	width: 100%;
	.img {
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		justify-content: center;
		margin: $uni-spacing-col-lg $uni-spacing-row-base;
	}
	.input-group {
		flex-direction: row;
		align-items: center;
		border-bottom: $uni-border-width $uni-border-style $uni-border-color;
		margin-top: $uni-spacing-col-lg;
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;
		.text {
			flex: 1;
		}
		// .btn{
		// 	left: 100px class='text';
		// }
	}
	.Logout {
		margin-top: $uni-spacing-col-lg * 3;
		margin-bottom: $uni-spacing-col-lg;
	}
}
</style>
